<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        width: 500px;
        height: 500px;
        background-color: black;
        margin: auto;
      }

      .button {
        background-color: blue;
        height: 100px;
        width: 100px;
        margin: 100px 200px;
      }

      .name {
        color: yellow;
        margin: auto;
        text-align: center;
        width: 200px;
        height: 200px;
        font-size: 30px;
      }
    </style>
  </head>

  <body>
    <body>
      <div class="container">
        <div class="name">名字</div>

        <button class="button">继续匹配</button>
      </div>
      <p></p>
    </body>

    <script>
      let data = [
        "而佛二分",
        "撒旦范德萨",
        "是地球上的",
        "案发时",
        "啊的撒范德萨",
        "大大",
        "safs",
      ];
      let btn = document.querySelector("button");
      let text = document.querySelector(".name");
      let all = document.querySelector(".container");
      let p = document.querySelector("p");
      let click = 0;
      let timer;
      let i;
      btn.addEventListener("click", () => {
        if (data.length == 0) {
          text.innerText = "抽取完毕";
          btn.setAttribute("disabled", "true");
          btn.style.backgroundColor = "grey";
        }
        if (click % 2 == 0 && data.length > 0) {
          setTimeout(() => click++);
          timer = setInterval(() => {
            i = Math.floor(Math.random() * data.length);
            text.innerText = data[i];
            btn.innerText = "停止抽取";
          }, 100);
        }
        if (click % 2 == 1) {
          clearInterval(timer);
          p.innerText += data[i] + "、";
          data.splice(i, 1);
          setTimeout(() => click++);
          btn.innerText = "开始抽取";
        }
      });
    </script>
  </body>
</html>
